<template>
  <div class="data_warp">
    <el-row type="flex" :gutter="20">
      <el-col :span="6"
        ><div>
          <el-tree
            ref="projectTree"
            :data="dataList"
            node-key="code"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :default-checked-keys="currentProject"
            :current-node-key="projectCode"
            check-strictly
            default-expand-all
            highlight-current
          ></el-tree></div
      ></el-col>
      <el-col :span="18"
        ><div>
          <span>姓名：</span>
          <el-select
          clearable
            @change="changePersonnelId"
            v-model="personnelId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span style="margin-left: 5px;">日期:</span>
          <el-date-picker
            @change="changeDate"
            value-format="yyyy-MM"
            format="yyyy-MM"
            v-model="value"
            type="month"
            placeholder="选择日期"
          >
          </el-date-picker>
          <el-calendar
            style="pointer-events: none"
            v-model="value"
            :ShowNextPrevMonth="false"
            id="calendar"
          >
            <template slot="dateCell" slot-scope="{ date, data }">
              <div >
                <div
                  class="calendar-day"
                  slot="reference"
                  @click.stop="
                    onClickDate(data.day, new Date(date).getTime(), $event)
                  "
                >
                  {{
                    data.day
                      .split("-")
                      .slice(2)
                      .join("-")
                  }}
                  <div
                    v-for="(item, index) in attendanceDetailsData"
                    :key="index"
                    slot="reference"
                    @click.stop="
                      onClick(item, data.day, new Date(date).getTime(), $event)
                    "
                  >
                    <div v-if="typeShow === '0'">
                      <p v-if="data.day == item.clockInDate">
                        考勤人数:{{ item.attendancePersonNum }}
                      </p>
                      <p v-if="data.day == item.clockInDate">
                        考勤率:{{ item.attendanceRate }}%
                      </p>
                      <p v-if="data.day == item.clockInDate">
                        考勤异常:{{ item.attendanceException }}
                      </p>
                    </div>
                    <div v-if="typeShow === '1'">
                      <p v-if="data.day == item.clockInDate">
                        进口:{{ item.morningStatusName }}
                      </p>
                      <p v-if="data.day == item.clockInDate">
                        出口:{{ item.eveningStatusName }}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-calendar>
        </div></el-col
      >
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: new Date(),
      projectCode: "",
      yearMouth: "",
      personnelId: "",
      options: [],
      typeShow: "",
      titleName: "",
      dateTime: "",
      floatLeft: 0,
      floatTop: 0,
      visible: false,
      time: Date.now(),
      attendanceDetailsData: [], //排班列表
      userList: [], //医生
      ruleForm: {},
      addForm: {}, //填表
      dataList: [],
      currentProject: [],
      currentCheck: "00001",
      defaultProps: {
        children: "projects",
        label: "name"
      }
    };
  },
  components: {},
  watch:{
    projectCode: {
      immediate: true,
      handler(value) {
        if (value.toString()) {
          // setCurrentKey函数必须放到$nextTick里面，否则tree还未渲染上，找不到tree
          this.$nextTick(() => {
            this.$refs['projectTree'].setCurrentKey(value)
          })
        }
      }
    }
  },
  created() {
    
    let date = new Date(this.value);
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    let time = y + "-" + m;
    this.yearMouth =time;
    this.companyProjectList();

  },
  methods: {
    changePersonnelId() {
      this.workList();
    },
    changeDate(e) {
      console.log(e,'eeee')
      this.yearMouth = e;
      this.workList();
    },
    // 获取考勤
    workList() {
      this.$http({
        url: this.$http.adornUrl(
          `/sys/battendancedata/attendanceDataCount?projectCode=${
            this.projectCode
          }&yearMouth=${this.yearMouth}&personnelId=${this.personnelId}`
        ),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          if (data.data.dataType === "0") {
            this.typeShow = data.data.dataType;
            this.attendanceDetailsData = data.data.projectAttCounts;
          }
          if (data.data.dataType === "1") {
            this.typeShow = data.data.dataType;
            this.attendanceDetailsData = data.data.personAttCounts;
          }
          if(data.data.dataType === ""){
            this.attendanceDetailsData = []
          }
        }
      });
    },
    onClick(a, b, c) {
      console.log(a, b, c);
    },
    onClickDate(a, b, c) {
      console.log(a, "1");
      console.log(b, "2");
      console.log(c, "3");
    },
    // 获取集团
    companyProjectList() {
      this.$http({
        url: this.$http.adornUrl(`/largeScreen/companyProjectList`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
        }
        this.dataList = data.data;
        this.projectCode= this.dataList[0].projects[0].code
        this.workList();
        this.nameList( this.projectCode);
      });
    },
    // 获取人员
    nameList(e) {
      this.$http({
        url: this.$http.adornUrl(`/sys/getParamenters/getPersonnelProfile`),
        method: "get",
        params: this.$http.adornParams({
          projectCode:e
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.options = data.list;
        }
      });
    },

    // 获取项目code
    handleNodeClick(e) {
      if (!e.projects) {
        this.projectCode = e.code;
        this.workList();
        this.nameList( this.projectCode);
      }
    }
  }
};
</script>
<style>
.data_warp .el-calendar-table .el-calendar-day {
  height: 116px;
}
.data_warp .el-button-group {
  display: none;
}

</style>
